<head>
    <meta charset="utf-8" />
    <title>普通伪类选择器</title>
    <!-- 
        伪类是选择器的一种，它用于选择处于特定状态的元素，比如当它们是这一类型的第一个元素时，或者是当鼠标指针悬浮在元素上面的时候。
        它们表现得会像是你向你的文档的某个部分应用了一个类一样，帮你在你的标记文本中减少多余的类，让你的代码更灵活、更易于维护。
        伪类就是开头为冒号的关键字：

        所有的伪类以同样的方式实现。它们选中你的文档中处于某种状态的那部分，表现得就像是你已经向你的 HTML 加入类一样。
            :first-child	匹配兄弟元素中的第一个元素。
            :last-child     匹配兄弟元素中最末的那个元素。
            :only-child     匹配没有兄弟元素的元素。
            :invalid        匹配诸如<input>的位于不可用状态的元素。
     -->
    <style>
        p:first-child {
            color: red;
        }
    </style>
</head>

<body>
    <div>
        <p>新增段落</p>
        <p>段落</p>
        <p>段落1</p>
        <p>段落2</p>
        <p>段落3</p>
    </div>

    <div>
        <p>新增段落</p>
        <p>段落</p>
        <p>段落4</p>
        <p>段落5</p>
        <p>段落6</p>
    </div>

    <p>独立段落1</p>
    <p>独立段落2</p>
</body>

</html>